<template>
  <div>
    <h3>Vue3事件处理</h3>
    <button v-on:click="handleClick">点我v-on</button><br>
    <button @click="handleClick">点我@默认参数</button><br>
    <button @click="handleClick($event,4)">点我@</button>
    <div v-if="isShow">显示</div>
    <div v-else>不显示</div>
    <button @click="handleA($event),handleB($event)">点击执行多个方法</button>
    {{$route.meta.title}}
  </div>
</template>

<script>
export default {
  name: 'Course8-10',
  data() {// 定义一些属性
    return {
      isShow: false
    }
  },
  methods: {// 定义函数与方法
    handleClick(e,n) {
      console.log(e)
      console.log(n)
      this.toggle()
    },
    toggle() {
      this.isShow = !this.isShow
    },
    handleA() {
      console.log('A')
    },
    handleB() {
      console.log('B')
    }
  }
}
</script>

<style>

</style>